import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input,Select,Button,Transfer,Tag, InputNumber, Radio, Modal, Cascader  } from 'antd'
// import style from './detail/index.less'

const FormItem = Form.Item
const Option = Select.Option
const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
}

const modal = ({
  item = {},
  // onOk,
  suiteChangeFn,
  changeTarget,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
    setFieldsValue
  },
  ...modalProps
}) => {
  const {productList}=modalProps
  const {suiteList}=modalProps
  const {productId}=modalProps
  const {suiteName}=modalProps

  const {level}=modalProps
  const {targetKeylist}=modalProps

  const goto=modalProps.goto

  const children = [];
  productList.map(item=>{
    children.push(<Option key={item.pk}>{item.fields.name}</Option>)
  })

  const suitechildren = [];
  suiteList.map(item=>{
    if(item.fields.product_name==productId){
      suitechildren.push(<Option key={item.pk}>{item.fields.name}</Option>)
    }
  })


  let productName=function(id){
    for(let i=0;i<productList.length;i++){
      if(productList[i].pk==id){
        return productList[i].fields.name
      }
    }
  }
  let suiteNameFn=(arr)=>{
    let suiteNames=[]
    // arr=arr.split(',')
    arr.map(item=>{
      for(let i=0;i<suiteList.length;i++){
        if(suiteList[i].pk==item){
          suiteNames.push(suiteList[i].fields.name)
        }
      }
    })

    return String(suiteNames)
  }
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        key: item.key,
        suite_names:targetKeylist
      }
      let plan=data
      plan.productName=productName(data.product_name_id)
      plan.productId=data.product_name_id
      // plan.suiteName=suiteNameFn(data.suite_names)
      plan.suiteName=data.suite_names.join(',')
      sessionStorage.setItem('currentPlan',JSON.stringify(plan))
      goto(data)
    })
  }

  const mockData=[];
  for (let i = 0; i < suiteList.length; i++) {
    if(level=='all' && suiteList[i].fields.product_name==productId){
      mockData.push({
        key:suiteList[i].pk,
        title: suiteList[i].fields.name,
      });
    }else if(suiteList[i].fields.product_name==productId && suiteList[i].fields.level==level){
      mockData.push({
        key:suiteList[i].pk,
        title: suiteList[i].fields.name,
      });
    }
  }
  const suiteChange=(value)=>{
    let params={
      productId:value,
      level:level?level:'all',
      targetKeylist:[]
    }
    suiteChangeFn(params)
  }
  const levelChange=(value)=>{
    let params={
      productId:productId,
      level:value,
      targetKeylist:targetKeylist
    }
    suiteChangeFn(params)
  }
  const moveChange=(targetKeys, direction, moveKeys)=> {
    changeTarget(targetKeys)
  }
  const onClose=(value)=>{
    let newlist=_.without(targetKeylist, value);
    changeTarget(newlist)
  }
  const targetTitle=(key)=>{
    for(let x = 0; x < suiteList.length; x++){
      if(suiteList[x].pk==key){
        return suiteList[x].fields.name
      }
    }
  }
  const targetChildren = [];
  for (let j = 0; j < targetKeylist.length; j++) {
    targetChildren.push(<Tag closable onClose={()=>onClose(targetKeylist[j])} key={targetKeylist[j]}>{targetTitle(targetKeylist[j])}</Tag>);
  }

  return (
  <Form layout="horizontal">
    <FormItem label="计划名称" hasFeedback {...formItemLayout}>
      {getFieldDecorator('name', {
        initialValue: '',
        rules: [
          {
            required: true,
          },
        ],
      })(<Input />)}
    </FormItem>
    <FormItem label="产品" hasFeedback {...formItemLayout}>
      {getFieldDecorator('product_name_id', {
        initialValue: '',
        rules: [
          {
            required: true,
          },
        ],
      })(<Select style={{ width: 120 }} onChange={suiteChange}>
        {children}
      </Select>)}
    </FormItem>
    <FormItem label="套件等级" hasFeedback {...formItemLayout} >
      {getFieldDecorator('level', {
        initialValue: 'all',
        // rules: [
        //   {
        //     required: true,
        //   },
        // ],
      })(<Select style={{ width: '100%' }} onChange={levelChange} defaultValue="all">
        <Option key='all'>全选</Option>
        <Option key='1'>1</Option>
        <Option key='2'>2</Option>
        <Option key='3'>3</Option>
        <Option key='4'>4</Option>
      </Select>)}
    </FormItem>
    <FormItem label="套件名称" hasFeedback {...formItemLayout}>
      {getFieldDecorator('suiteNames', {
        // initialValue: item.fields?suiteName:[],
        // rules: [
        //   {
        //     required: true,
        //   },
        // ],
      })(
        <Transfer
          dataSource={mockData}
          targetKeys={targetKeylist}
          onChange={moveChange}
          // onSelectChange={this.handleSelectChange}
          render={item => item.title}
        />


      )}
    </FormItem>
    <FormItem wrapperCol={{ span: 14, offset: 6 }} hasFeedback style={{ marginTop: 24 }}>
      {targetChildren}

    </FormItem>
    {/*<FormItem label="套件名称" hasFeedback {...formItemLayout}>*/}
      {/*{getFieldDecorator('suite_names', {*/}
        {/*initialValue: [],*/}
        {/*rules: [*/}
          {/*{*/}
            {/*required: true,*/}
          {/*},*/}
        {/*],*/}
      {/*})(*/}
        {/*<Select  style={{ width: '100%' }} multiple allowClear>*/}
        {/*{suitechildren}*/}
      {/*</Select>)}*/}
    {/*</FormItem>*/}
    <FormItem label="描述" hasFeedback {...formItemLayout}>
      {getFieldDecorator('description', {
        initialValue: '',

      })(<Input />)}
    </FormItem>
    <FormItem wrapperCol={{ span: 16, offset: 6 }} style={{ marginTop: 24 }}>
      <Button type="primary" htmlType="submit" onClick={handleOk}>OK</Button>
    </FormItem>

  </Form>

  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  // onOk: PropTypes.func,
}

export default Form.create()(modal)
